<template>
    <div class="white-box">
        <div class="task-one">
            <!-- <div class="task-one__item">
                <span class="task-one__label">店铺名称：</span>
                <el-input placeholder="输入店铺名称" v-model.trim="shop_name" clearable></el-input>
            </div> -->
            <div class="task-one__item">
                <span class="task-one__label">公司名称：</span>
                <el-input placeholder="输入公司名称" v-model.trim="company_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">申请人姓名：</span>
                <el-input placeholder="输入申请人姓名" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">申请人ID：</span>
                <el-input placeholder="输入申请人ID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">手机号码：</span>
                <el-input placeholder="输入申请人手机号" v-model.trim="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">申请时间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="`${item.label}(${item.nums})`" :name="item.name" v-for="item in tabarr" :key="item.name"> </el-tab-pane>
        </el-tabs>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="contact" label="姓名" width="120"></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="130"></el-table-column>
            <el-table-column prop="com_title" label="公司名称" min-width="180"></el-table-column>
            <el-table-column label="所在地区" min-width="240">
                <template #default="{ row }">
                    <span>{{ row.addr + row.house }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
            <el-table-column label="审核时间" width="160" v-if="tabName > 0">
                <template #default="{ row }">
                    <span>{{ row.verify_time_label || "" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="拒绝原因" min-width="180" v-if="tabName == 2">
                <template #default="{ row }">
                    <span>{{ row.refuse }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="166" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickExam(row)" v-if="row.verify == 0">审核</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 供应商审核 -->
        <el-dialog v-model="dialogExam" :append-to-body="true" :destroy-on-close="true" title="供应商审核" width="600px">
            <div>
                <detail-item title="申请人信息" bottom="24px" :value="`${itemObjs.contact}[${itemObjs.uid}]`" />
                <detail-item title="审核结果" bottom="24px">
                    <el-radio-group v-model="radio_type">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group>
                </detail-item>
                <detail-item title="选择站点" bottom="24px" align-item="center" v-if="radio_type == 1">
                    <el-select v-model="dc_id" clearable placeholder="请选择站点">
                        <el-option :label="item.title" :value="item.dc_id" v-for="item in dc_list" :key="item.dc_id" />
                    </el-select>
                </detail-item>
                <detail-item title="拒绝原因" bottom="24px">
                    <el-input v-model.trim="exam_remark" :rows="5" type="textarea" clearable placeholder="请输入拒绝原因，拒绝时必填" />
                </detail-item>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmExam">确认审核</el-button>
                    <el-button @click="dialogExam = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 详情 -->
        <el-drawer
            title="查看详情"
            v-model="drawerDetail"
            direction="rtl"
            size="560px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="drawerDetail = false"
        >
            <div class="xq-box">
                <detail-item title="申请人" :value="objs.contact" bottom="24px" />
                <detail-item title="申请人ID" :value="objs.uid" bottom="24px" />
                <detail-item title="手机号码" :value="objs.mobile" bottom="24px" />
                <detail-item title="公司名称" :value="objs.com_title" bottom="24px" />
                <detail-item title="所在地区" :value="objs.addr + objs.house" bottom="24px" />
                <detail-item title="简介描述" :value="objs.intro" bottom="24px" />
                <detail-item title="审核状态" :value="verify_labels[objs.verify]" bottom="24px" value-color="#4B93FA" />
                <detail-item title="审核时间" :value="objs.verify_time_label" bottom="24px" v-if="objs.verify_time_label" />
                <detail-item title="拒绝原因" :value="objs.refuse" bottom="24px" v-if="objs.refuse" />
                <detail-item title="申请时间" :value="objs.created_at_label" bottom="24px" />
                <detail-item title="身份证正面" bottom="24px">
                    <div class="img-item">
                        <el-image class="img-selects__pic" :src="proxy.imgUrl + objs.id_photo_front + '!img_400'" fit="cover" v-if="objs.id_photo_front" />
                    </div>
                </detail-item>
                <detail-item title="身份证反面" bottom="24px">
                    <div class="img-item">
                        <el-image class="img-selects__pic" :src="proxy.imgUrl + objs.id_photo_back + '!img_400'" fit="cover" v-if="objs.id_photo_back" />
                    </div>
                </detail-item>
                <detail-item title="营业执照" bottom="24px">
                    <div class="img-item">
                        <el-image class="img-selects__pic" :src="proxy.imgUrl + objs.account_photo + '!img_400'" fit="cover" v-if="objs.account_photo" />
                    </div>
                </detail-item>
            </div>
        </el-drawer>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getCount()
    getPublickSearch()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const verify_labels = ["待审核", "通过认证", "认证被拒绝", "未提交"]
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        status: status.value,
        // shop_name: shop_name.value,
        so: company_name.value,
        contact: user_name.value,
        uid: user_id.value,
        mobile: tel.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("supplier/combine/index", params)
}

/**
 * 搜索
 * @param {String} shop_name 店铺名称
 * @param {String} company_name 公司名称
 * @param {String} area_time 申请时间
 * @param {String} user_name 申请人姓名
 * @param {String} user_id 会员ID
 * @param {String} tel 手机号
 */
// const shop_name = ref("")
const company_name = ref("")
const area_time = ref("")
const user_name = ref("")
const user_id = ref("")
const tel = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * tab切换
 * @param {String} status tab切换的类型值
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const status = ref("1")
const tabName = ref("0")
const tabarr = ref([
    {
        label: "待审核",
        name: "0",
        status: "1",
        nums: 0,
    },
    {
        label: "通过",
        name: "1",
        status: "2",
        nums: 0,
    },
    {
        label: "拒绝",
        name: "2",
        status: "3",
        nums: 0,
    },
])
const handleTab = (pane) => {
    status.value = tabarr.value[pane.index].status
    getCount(2)
}
function getCount(type = 1) {
    proxy.$axios
        .get("supplier/combine/tongji")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tabarr.value[0].nums = result.wait_verify_count
                tabarr.value[1].nums = result.verify_count
                tabarr.value[2].nums = result.refuse_count
                type == 1 && getList()
                type == 2 && pubRefreshParams(getList)
                type == 3 && pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const form_loading = ref(false)
const itemObjs = ref("") // 公用数据项

/**
 * 审核
 * @param {String} radio_type 审核类型 [1:通过,2:拒绝]
 * @param {String} exam_remark 拒绝原因
 * @param {Boolean} dialogExam 弹窗状态
 * @param {Array} examines 审核状态数组
 */
const radio_type = ref(1)
const exam_remark = ref("")
const dialogExam = ref(false)
const clickExam = (row) => {
    itemObjs.value = row
    dialogExam.value = true
}
// 审核
const confirmExam = () => {
    if (dc_id.value == "" && radio_type.value == 1) {
        proxy.$message({ message: "请选择站点！", type: "warning" })
        return
    }
    if (exam_remark.value == "" && radio_type.value == 2) {
        proxy.$message({ message: "请输入拒绝原因！", type: "warning" })
        return
    }
    let datas = {
        combine_id: itemObjs.value.combine_id,
        verify: radio_type.value,
        refuse: exam_remark.value,
    }
    radio_type.value == 1 && (datas.dc_id = dc_id.value)
    dialogExam.value = false
    form_loading.value = true
    proxy.$axios
        .post("supplier/combine/verify", datas)
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: '审核成功！', type: "success" })
                dialogExam.value = false
                getCount(3)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
/***
 * 获取站点数据
 * @param {Array} dc_list 站点数据
 */
const dc_list = ref([])
const dc_id = ref("")
function getPublickSearch() {
    proxy.$axios
        .get("supplier/search")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                dc_list.value = result.dc_list
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 删除
const clickDel = (row) => {
    proxy.$axios
        .post("supplier/combine/delete", {
            combine_id: row.combine_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                getCount(3)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 详情
const objs = ref({})
const drawerDetail = ref(false)
const clickDetail = (row) => {
    drawerDetail.value = true
    getDetail(row.combine_id)
}
function getDetail(id) {
    proxy.$axios
        .get("supplier/combine/detail", {
            params: {
                combine_id: id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                objs.value = res.data.data
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "JoinList",
}
</script>

<style lang="less" scoped>
:deep(.el-radio) {
    height: auto;
}
.img-selects__pic {
    width: 300px;
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    // .el-tabs__nav {
    //     border: 1px solid #e4e7ed;
    //     border-bottom: 0;
    // }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
